hanye-website/pages/products/[id].vue

<template>
  <div>
    <div class="w-full h-[55px] sm:h-[72px]"></div>
    <ErrorBoundary :error="error">
      <div v-if="isLoading" class="flex justify-center py-12">
        <!-- 加载中 -->
        <div
          class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"
        ></div>
      </div>

      <div v-else>
        <!-- 面包屑导航 -->
        <div class="max-w-full mb-6 xl:px-2 lg:px-2 md:px-4 px-4 mt-6">
          <div class="max-w-screen-2xl mx-auto">
            <nuxt-link
              to="/"
              class="justify-start text-white/60 text-base font-normal"
              >ホーム</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <nuxt-link
              to="/products"
              class="text-white/60 text-base font-normal"
              >製品一覧</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <nuxt-link
              v-if="product?.category"
              :to="`/products?category=${encodeURIComponent(product.category)}`"
              class="text-white/60 text-base font-normal"
              >{{ product.category }}</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <span class="text-white text-base font-normal">{{
              product?.title || product?.name
            }}</span>
          </div>
        </div>

        <!-- 产品详情内容 -->
        <div
          v-if="product"
          class="max-w-full mb-12 md:mb-20 lg:mb-32 xl:px-2 lg:px-2 md:px-4 px-4"
        >
          <div class="max-w-screen-2xl mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
              <!-- 左侧产品图片 -->
              <div class="flex flex-col gap-6">
                <!-- 主图展示 -->
                <div
                  class="bg-zinc-900 rounded-lg p-8 relative overflow-hidden group aspect-square"
                >
                  <!-- 加载状态 -->
                  <div
                    v-if="isImageLoading"
                    class="absolute inset-0 flex items-center justify-center bg-zinc-800/50 z-10"
                  >
                    <div
                      class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"
                    ></div>
                  </div>

                  <!-- 主图容器 -->
                  <div class="relative w-full h-full">
                    <!-- 当前图片 -->
                    <img
                      :src="currentImage"
                      :alt="product.name"
                      class="absolute inset-0 w-full h-full object-contain rounded-lg transition-all duration-500"
                      :class="{
                        'opacity-0': isImageLoading,
                        'opacity-100': !isImageLoading,
                      }"
                      @load="handleImageLoad"
                      @error="handleImageError"
                    />

                    <!-- 预加载图片 -->
                    <img
                      v-if="preloadImage"
                      :src="preloadImage"
                      class="absolute inset-0 w-full h-full object-contain rounded-lg opacity-0"
                      @load="handlePreloadComplete"
                    />
                  </div>

                  <!-- 错误提示 -->
                  <div
                    v-if="imageError"
                    class="absolute inset-0 flex items-center justify-center bg-red-900/50 z-20"
                  >
                    <div class="flex flex-col items-center gap-2">
                      <span class="text-white"
                        >画像の読み込みに失敗しました</span
                      >
                      <button
                        @click.stop="retryLoadImage"
                        class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-300"
                      >
                        再試行
                      </button>
                    </div>
                  </div>
                </div>

                <!-- 缩略图列表 -->
                <div class="flex gap-4 overflow-x-auto pb-2 scrollbar-hide">
                  <div
                    v-for="(image, index) in [
                      product.image,
                      ...(product.gallery || []),
                    ]"
                    :key="index"
                    @click="changeImage(image)"
                    class="flex-shrink-0 w-20 h-20 cursor-pointer rounded-lg transition-all duration-300 relative group aspect-square p-0.5"
                    :class="{
                      'bg-gradient-to-r from-blue-500 to-blue-600':
                        currentImage === image,
                      'hover:bg-gradient-to-r hover:from-blue-500/50 hover:to-blue-600/50':
                        currentImage !== image,
                      'opacity-50':
                        isThumbnailLoading[index] || thumbnailErrors[index],
                    }"
                  >
                    <!-- 缩略图加载状态 -->
                    <div
                      v-if="isThumbnailLoading[index]"
                      class="absolute inset-0 flex items-center justify-center bg-zinc-800 rounded-lg"
                    >
                      <div
                        class="animate-spin h-4 w-4 border-2 border-blue-500 rounded-full border-t-transparent"
                      ></div>
                    </div>

                    <!-- 缩略图遮罩 -->
                    <div
                      class="absolute inset-0 bg-black/0 transition-all duration-300 rounded-lg"
                      :class="{
                        'bg-black/30': currentImage === image,
                        'group-hover:bg-black/20': currentImage !== image,
                      }"
                    ></div>

                    <img
                      :src="image"
                      :alt="`${product.name} - 画像 ${index + 1}`"
                      class="w-full h-full object-cover transition-all duration-300 rounded-lg"
                      :class="{
                        'opacity-0': isThumbnailLoading[index],
                        'opacity-100': !isThumbnailLoading[index],
                        'group-hover:scale-110': currentImage !== image,
                      }"
                      @load="handleThumbnailLoad(index)"
                      @error="handleThumbnailError(index)"
                    />

                    <!-- 选中标记 -->
                    <div
                      v-if="currentImage === image"
                      class="absolute top-1 right-1 w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center"
                    >
                      <div class="w-2 h-2 bg-white rounded-full"></div>
                    </div>

                    <!-- 缩略图错误提示 -->
                    <div
                      v-if="thumbnailErrors[index]"
                      class="absolute inset-0 flex items-center justify-center bg-red-900/50 rounded-lg"
                    >
                      <div class="flex flex-col items-center gap-1">
                        <span class="text-white text-xs">エラー</span>
                        <button
                          @click.stop="retryLoadThumbnail(index)"
                          class="px-2 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors duration-300"
                        >
                          再試行
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 右侧产品信息 -->
              <div class="flex flex-col gap-8">
                <!-- 产品名称 -->
                <div class="bg-zinc-900 rounded-lg p-6">
                  <h1 class="text-white text-3xl font-medium mb-4">
                    {{ product.title || product.name }}
                  </h1>
                  <div class="text-stone-400 text-lg leading-relaxed">
                    {{ product.summary }}
                  </div>
                </div>

                <!-- 产品参数 -->
                <div class="bg-zinc-900 rounded-lg p-6">
                  <h2 class="text-white text-xl font-medium mb-6">製品仕様</h2>
                  <div class="grid grid-cols-1 gap-4">
                    <div
                      class="flex justify-between items-center py-2 border-b border-zinc-800"
                    >
                      <span class="text-stone-400">カテゴリー</span>
                      <span class="text-white font-medium">{{
                        product.category
                      }}</span>
                    </div>
                    <div
                      class="flex justify-between items-center py-2 border-b border-zinc-800"
                    >
                      <span class="text-stone-400">用途</span>
                      <span class="text-white font-medium">{{
                        product.usage?.join(", ")
                      }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2">
                      <span class="text-stone-400">容量</span>
                      <span class="text-white font-medium">{{
                        product.capacities?.join(" / ")
                      }}</span>
                    </div>
                  </div>
                </div>

                <!-- 产品描述 -->
                <div class="bg-zinc-900 rounded-lg p-6">
                  <h2 class="text-white text-xl font-medium mb-6">产品描述</h2>
                  <div
                    class="text-stone-400 leading-relaxed space-y-4 prose prose-invert max-w-none"
                  >
                    {{ product.description }}
                  </div>
                </div>

                <div class="bg-zinc-900 rounded-lg p-6">
                  <h2 class="text-white text-xl font-medium mb-6">详细描述</h2>
                  <div
                    class="text-stone-400 leading-relaxed space-y-4 prose prose-invert max-w-none"
                  >
                    <ContentRenderer :value="product.content" />
                  </div>
                </div>

                <!-- 相关产品 -->
                <div
                  v-if="relatedProducts.length > 0"
                  class="bg-zinc-900 rounded-lg p-6"
                >
                  <h2 class="text-white text-xl font-medium mb-6">
                    {{
                      product.meta?.series && product.meta.series.length > 0
                        ? "同シリーズ製品"
                        : "関連製品"
                    }}
                  </h2>
                  <div
                    class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
                  >
                    <nuxt-link
                      v-for="relatedProduct in relatedProducts"
                      :key="relatedProduct.id"
                      :to="`/products/${relatedProduct.id}`"
                      class="group"
                    >
                      <div
                        class="bg-zinc-800 rounded-lg p-4 transition-all duration-300 hover:bg-zinc-700"
                      >
                        <div
                          class="aspect-square mb-4 overflow-hidden rounded-lg"
                        >
                          <img
                            :src="relatedProduct.image"
                            :alt="relatedProduct.title || relatedProduct.name"
                            class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                          />
                        </div>
                        <h3
                          class="text-white text-lg font-medium mb-2 line-clamp-2"
                        >
                          {{ relatedProduct.title || relatedProduct.name }}
                        </h3>
                        <p class="text-stone-400 text-sm line-clamp-2">
                          {{ relatedProduct.summary }}
                        </p>
                      </div>
                    </nuxt-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * 产品详情页面
 * 展示产品主图、参数和描述
 */
import { useErrorHandler } from "~/composables/useErrorHandler";
import { useAsyncData, useRoute, useI18n } from "#imports";
import { queryCollection } from "#imports";
import { ContentRenderer } from "#components";

const { error, isLoading, wrapAsync } = useErrorHandler();
const route = useRoute();
const product = ref<Product | null>(null);
const relatedProducts = ref<Product[]>([]);
const { locale, t } = useI18n();
const currentImage = ref<string>("");
const isImageLoading = ref(true);
const isThumbnailLoading = ref<boolean[]>([]);
const imageError = ref(false);
const thumbnailErrors = ref<boolean[]>([]);
const preloadImage = ref<string | null>(null);

interface Product {
  id: string;
  name: string;
  usage: string[];
  capacities: string[];
  category: string;
  description: string;
  summary: string;
  image: string;
  gallery: string[];
  body: string;
  content?: any;
  meta?: {
    series?: string[];
    name?: string;
    title?: string;
    image?: string;
    summary?: string;
  };
  title?: string;
}

interface ContentCollectionItem {
  _path?: string;
  _id?: string;
  name?: string;
  title?: string;
  usage?: string[];
  capacities?: string[];
  categoryId?: string;
  description?: string;
  summary?: string;
  image?: string;
  gallery?: string[];
  body?: string;
  content?: any;
  series?: string[];
  meta?: {
    series?: string[];
    name?: string;
    title?: string;
    image?: string;
    summary?: string;
  };
}

interface ContentData {
  path: string;
  name?: string;
  title?: string;
  usage?: string[];
  capacities?: string[];
  categoryId?: string;
  category?: string;
  description?: string;
  summary?: string;
  image?: string;
  gallery?: string[];
  body?: string;
  content?: any;
  meta?: {
    series?: string[];
    name?: string;
    title?: string;
    image?: string;
    summary?: string;
  };
}

/**
 * 将 ContentCollectionItem 转换为 ContentData
 */
function convertToContentData(item: any): ContentData {
  console.log("Raw item:", item); // 添加原始数据日志

  // 直接从原始数据中获取字段
  const converted = {
    path: item._path || "",
    name: item.name || item.title || "",
    title: item.title || "",
    usage: item.meta.usage || [],
    capacities: item.meta.capacities || [],
    categoryId: item.meta.categoryId || "",
    category: item.meta.category || "",
    description: item.description || "",
    summary: item.meta.summary || "",
    image: item.meta.image || "",
    gallery: item.meta.gallery || [],
    body: item.body || "",
    content: item.body || null,
    series: item.meta.series || [],
  };

  console.log("Converting item:", item); // 添加日志
  console.log("Converted result:", converted); // 添加日志

  return converted;
}

/**
 * 加载产品详情
 */
async function loadProduct() {
  try {
    const id = route.params.id as string;
    if (!id) {
      throw new Error("Product ID is required");
    }

    const { data } = await useAsyncData(`product-${id}`, () =>
      queryCollection("content")
        .where("path", "LIKE", `/products/${locale.value}/${id}`)
        .first()
    );

    if (!data.value) {
      throw new Error("Product not found");
    }

    const rawData = data.value as unknown as any;
    console.log("Raw product data:", rawData); // 添加日志

    const productData = convertToContentData(rawData);
    console.log("Converted product data:", productData); // 添加日志

    // 获取分类信息
    const { data: categoryData } = await useAsyncData(
      `category-${productData.categoryId}`,
      () =>
        queryCollection("content")
          .where(
            "path",
            "LIKE",
            `/categories/${locale.value}/${productData.categoryId}`
          )
          .first()
    );

    console.log("Category data:", categoryData.value); // 添加日志

    const categoryItem = categoryData.value
      ? convertToContentData(categoryData.value as unknown as any)
      : null;
    console.log("Converted category data:", categoryItem); // 添加日志

    // 设置产品数据，添加默认值
    product.value = {
      id: id,
      name: productData.name || productData.title || "",
      title: productData.title || productData.name || "",
      usage: productData.usage || [],
      capacities: productData.capacities || [],
      category: categoryItem?.title || productData.category || "",
      description: productData.description || "",
      summary: productData.summary || "",
      image: productData.image || "",
      gallery: productData.gallery || [],
      body: productData.body || "",
      content: productData.content || null,
      meta: {
        series: productData.meta?.series || [],
        name: productData.name,
        title: productData.title,
        image: productData.image,
        summary: productData.summary,
      },
    };

    console.log("Final product data:", product.value); // 添加日志

    // 设置当前图片
    if (product.value?.image) {
      currentImage.value = product.value.image;
    }

    // 加载相关产品
    await loadRelatedProducts();
  } catch (err) {
    console.error("Error loading product:", err);
    error.value = new Error(t("products.loadError"));
  }
}

/**
 * 预加载下一张图片
 */
function preloadNextImage(image: string) {
  preloadImage.value = image;
}

/**
 * 处理预加载完成
 */
function handlePreloadComplete() {
  preloadImage.value = null;
}

/**
 * 处理图片加载完成
 */
function handleImageLoad() {
  isImageLoading.value = false;
  imageError.value = false;
}

/**
 * 处理图片加载错误
 */
function handleImageError() {
  isImageLoading.value = false;
  imageError.value = true;
}

/**
 * 重试加载图片
 */
function retryLoadImage() {
  isImageLoading.value = true;
  imageError.value = false;
  // 强制重新加载图片
  const img = new Image();
  img.src = currentImage.value;
  img.onload = () => {
    handleImageLoad();
  };
  img.onerror = () => {
    handleImageError();
  };
}

/**
 * 重试加载缩略图
 */
function retryLoadThumbnail(index: number) {
  isThumbnailLoading.value[index] = true;
  thumbnailErrors.value[index] = false;
  // 强制重新加载缩略图
  const img = new Image();
  const images = [product.value?.image, ...(product.value?.gallery || [])];
  img.src = images[index] || "";
  img.onload = () => {
    handleThumbnailLoad(index);
  };
  img.onerror = () => {
    handleThumbnailError(index);
  };
}

/**
 * 处理缩略图加载完成
 */
function handleThumbnailLoad(index: number) {
  isThumbnailLoading.value[index] = false;
  thumbnailErrors.value[index] = false;
}

/**
 * 处理缩略图加载错误
 */
function handleThumbnailError(index: number) {
  isThumbnailLoading.value[index] = false;
  thumbnailErrors.value[index] = true;
}

/**
 * 切换图片
 */
function changeImage(image: string | undefined) {
  if (image && image !== currentImage.value) {
    isImageLoading.value = true;
    imageError.value = false;
    preloadNextImage(image);
    currentImage.value = image;
  }
}

/**
 * 加载相关产品
 */
async function loadRelatedProducts() {
  try {
    if (!product.value) return;

    const { data } = await useAsyncData(
      `related-products-${product.value.id}`,
      () =>
        queryCollection("content")
          .where("path", "LIKE", `/products/${locale.value}/%`)
          .all()
    );

    if (!data.value) return;

    const relatedItems = (data.value as unknown as ContentCollectionItem[]).map(
      (item) => convertToContentData(item)
    );

    relatedProducts.value = relatedItems
      .filter(
        (item) => item.path !== `/products/${locale.value}/${product.value?.id}`
      )
      .map((item) => ({
        id: item.path.split("/").pop() || "",
        name: item.name || item.title || "",
        title: item.title || item.name || "",
        usage: item.usage || [],
        capacities: item.capacities || [],
        category: "",
        description: item.description || "",
        summary: item.summary || "",
        image: item.image || "",
        gallery: item.gallery || [],
        body: item.body || "",
        meta: {
          series: item.meta?.series || [],
          name: item.name,
          title: item.title,
          image: item.image,
          summary: item.summary,
        },
      }));
  } catch (err) {
    console.error("Error loading related products:", err);
  }
}

// 页面加载时获取产品数据
onMounted(() => {
  loadProduct();
  // 初始化缩略图加载状态数组
  isThumbnailLoading.value = Array(4).fill(true);
  thumbnailErrors.value = Array(4).fill(false);
});

// 监听路由参数变化
watch(
  () => route.params.id,
  async (newId) => {
    if (newId) {
      await loadProduct();
    }
  },
  { immediate: true }
);

// 监听语言变化
watch(
  () => locale.value,
  async () => {
    if (route.params.id) {
      await loadProduct();
    }
  }
);

// 监听产品数据变化，加载相关产品
watch(
  () => product.value,
  () => {
    if (product.value) {
      loadRelatedProducts();
    }
  }
);

// SEO优化
useHead(() => ({
  title: `${product.value?.name || "产品详情"} - Hanye`,
  meta: [
    {
      name: "description",
      content: product.value?.description || "产品详情页面",
    },
  ],
}));
</script>

<style scoped>
/* 隐藏滚动条但保持滚动功能 */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* 图片过渡动画 */
.main-image {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 缩略图悬停效果 */
.thumbnail-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnail-item:hover {
  transform: translateY(-2px);
}

/* 缩略图选中效果 */
.thumbnail-item.selected {
  transform: scale(1.05);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 产品信息卡片效果 */
.info-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 添加 prose 样式 */
.prose {
  @apply text-stone-400;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  @apply text-white font-medium;
}

.prose a {
  @apply text-blue-400 hover:text-blue-300;
}

.prose ul,
.prose ol {
  @apply list-disc list-inside;
}

.prose blockquote {
  @apply border-l-4 border-zinc-700 pl-4 italic;
}

.prose code {
  @apply bg-zinc-800 px-1 py-0.5 rounded;
}

.prose pre {
  @apply bg-zinc-800 p-4 rounded-lg overflow-x-auto;
}

.prose img {
  @apply rounded-lg;
}
</style>